import React, {useContext, useEffect} from 'react';
import {View, Alert, ScrollView} from 'react-native';
import {useMount, useDebounceEffect, useMap, useSafeState} from 'ahooks';
import dayjs from 'dayjs';
import {useRoute} from '@react-navigation/native';
import {useSelector, useDispatch} from 'react-redux';
import {Text, Button, Input, Dialog, ListItem, Avatar} from '@rneui/themed';
import RNDI from 'react-native-device-info';
import GlobalContext from '@/GlobalContext';
import {ApiHost, OssHost} from '@/config/common';
import {setKeyGetAccountInfo} from '@/store';
import globalStyle from '@/style/global.less';
import style from './style.less';
import {useNavigation} from '@react-navigation/native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

import RNFS from 'react-native-fs';
import {Dirs, FileSystem} from 'react-native-file-access';
import {round} from 'lodash';

const leftIconSize = 18;
const rightIconSize = 20;
export default ({children}) => {
  const {localMongoDbFileSystem} = useContext(GlobalContext);
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const token = useSelector(state => state.token.value);
  const accountInfo = useSelector(state => state.accountInfo.value);
  const deviceInfo = useSelector(state => state.deviceInfo.value);
  const {uniqueId} = deviceInfo || {};

  const [submitLoading, setSubmitLoading] = useSafeState(false);

  const netdiskMapArr = accountInfo?.j_ext_info?.netdisk_map_arr;
  const [netdiskMap, {set, get, setAll}] = useMap(netdiskMapArr);

  const [storeInfo, setStoreInfo] = useSafeState({});
  const [useGB, setUseGB] = useSafeState(0);
  useMount(() => {
    FileSystem.df().then(res => {
      const {external_free, external_total, internal_free, internal_total} =
        res;
      const data = {
        external_free_GB: round(external_free / 1024 / 1024 / 1024, 2),
        external_total_GB: round(external_total / 1024 / 1024 / 1024, 2),
        internal_free_GB: round(internal_free / 1024 / 1024 / 1024, 2),
        internal_total_GB: round(internal_total / 1024 / 1024 / 1024, 2),
      };
      const use = round(data.internal_total_GB - data.internal_free_GB, 2);
      setUseGB(use);
    });
  });

  return (
    <>
      <View style={style.box}>
        <View style={style.header}>
          <View style={style.searchBox}>
            <Input
              placeholder="Search"
              onChangeText={v => {
                console.log('v', v);
              }}
              maxLength={100}
              errorStyle={{
                display: 'none',
              }}
              inputContainerStyle={{
                borderBottomWidth: 0,
                backgroundColor: '#ffffff',
              }}
            />
          </View>
          <FontAwesome5.Button
            name="cog"
            size={22}
            onPress={() => {
              navigation.push('NetdiskAndroidSetting');
            }}
            iconStyle={{
              marginRight: 4,
              marginLeft: 4,
            }}
          />
        </View>
        <ScrollView
          style={[
            globalStyle.boxViewBasic,
            {
              flex: 1,
            },
          ]}>
          <ListItem
            onPress={() => {
              navigation.push('NetdiskAndroidSelf');
            }}
            style={{
              marginTop: 10,
            }}>
            <FontAwesome5 name="folder" size={leftIconSize} color="#40a9ff" />
            <ListItem.Content>
              <ListItem.Title style={{color: '#40a9ff'}}>
                来自：本机文件（{useGB}GB）
              </ListItem.Title>
            </ListItem.Content>
            <ListItem.Chevron size={rightIconSize} />
          </ListItem>

          {netdiskMapArr
            .filter(([key]) => key !== uniqueId)
            .map(([, {deviceName}], index) => (
              <ListItem
                key={index}
                onPress={() => {
                  navigation.push('MineService');
                }}
                style={{
                  marginTop: 10,
                }}>
                <FontAwesome5 name="folder" size={leftIconSize} />
                <ListItem.Content>
                  <ListItem.Title>来自：{deviceName}</ListItem.Title>
                </ListItem.Content>
                <ListItem.Chevron size={rightIconSize} />
              </ListItem>
            ))}
        </ScrollView>
      </View>
    </>
  );
};
